<template>
  <div class="exhibition">
    <div class="exhibition-header">
      <h1>中华书法艺术展览</h1>
      <p class="exhibition-subtitle">传承千年文化，展现笔墨风华</p>
    </div>

    <div class="exhibition-nav">
      <button 
        v-for="category in categories" 
        :key="category.id"
        :class="{ active: activeCategory === category.id }"
        @click="setActiveCategory(category.id)"
      >
        {{ category.name }}
      </button>
    </div>

    <div class="exhibition-content">
      <div class="artwork-grid">
        <div class="artwork-card" v-for="artwork in filteredArtworks" :key="artwork.id" @click="goToDetail(artwork.id)">
          <div class="artwork-image">
            <img :src="artwork.image" :alt="artwork.title">
          </div>
          <div class="artwork-info">
            <h3>{{ artwork.title }}</h3>
            <p class="artist">{{ artwork.artist }}</p>
            <p class="description">{{ artwork.description }}</p>
            <div class="artwork-meta">
              <span class="dynasty">{{ artwork.dynasty }}</span>
              <span class="style">{{ artwork.style }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { artworkApi, categoryApi } from '@/api'

const router = useRouter()
const activeCategory = ref('all')
const categories = ref([
  { id: 'all', name: '全部作品' }
])
const artworks = ref([])

// 获取分类和作品数据
const fetchData = async () => {
  try {
    // 获取分类
    const categoryResponse = await categoryApi.getCategories()
    categories.value = [
      { id: 'all', name: '全部作品' },
      ...categoryResponse.data
    ]
    
    // 获取作品
    const artworkResponse = await artworkApi.getArtworks()
    artworks.value = artworkResponse.data
  } catch (error) {
    console.error('获取数据失败:', error)
    // 如果API调用失败，使用模拟数据
    useMockData()
  }
}

// 使用模拟数据（备用方案）
const useMockData = () => {
  categories.value = [
    { id: 'all', name: '全部作品' },
    { id: 'ancient', name: '古代经典' },
    { id: 'modern', name: '近现代名家' },
    { id: 'contemporary', name: '当代新锐' }
  ]
  
  artworks.value = [
    {
      id: 1,
      title: '兰亭序',
      artist: '王羲之',
      dynasty: '东晋',
      style: '行书',
      category: 'ancient',
      description: '被誉为"天下第一行书"，是王羲之在兰亭雅集时所作，书法飘逸秀美，气韵生动。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    },
    {
      id: 2,
      title: '祭侄文稿',
      artist: '颜真卿',
      dynasty: '唐代',
      style: '行书',
      category: 'ancient',
      description: '颜真卿为祭奠侄子颜季明所作，书法雄浑悲壮，被誉为"天下第二行书"。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    },
    {
      id: 3,
      title: '黄州寒食诗帖',
      artist: '苏轼',
      dynasty: '宋代',
      style: '行书',
      category: 'ancient',
      description: '苏轼被贬黄州时所作，书法自然流畅，情感真挚，体现了文人书法的独特韵味。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    },
    {
      id: 4,
      title: '自叙帖',
      artist: '怀素',
      dynasty: '唐代',
      style: '草书',
      category: 'ancient',
      description: '怀素的代表作之一，笔法狂放不羁，线条流畅如行云流水，展现了草书的极致之美。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    },
    {
      id: 5,
      title: '急就章',
      artist: '宋克',
      dynasty: '明代',
      style: '章草',
      category: 'ancient',
      description: '明代书法家宋克的章草代表作，笔法古朴，结构严谨，体现了章草的独特韵味。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    },
    {
      id: 6,
      title: '毛泽东诗词',
      artist: '毛泽东',
      dynasty: '现代',
      style: '草书',
      category: 'modern',
      description: '毛泽东的书法作品，气势磅礴，笔力雄健，体现了革命家的豪迈气概。',
      image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
    }
  ]
}

const filteredArtworks = computed(() => {
  if (activeCategory.value === 'all') {
    return artworks.value
  }
  return artworks.value.filter(artwork => artwork.category === activeCategory.value)
})

const setActiveCategory = (categoryId) => {
  activeCategory.value = categoryId
}

const goToDetail = (id) => {
  router.push(`/exhibition/${id}`)
}

// 组件挂载时获取数据
onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.exhibition {
  width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.exhibition-header {
  text-align: center;
  margin-bottom: 2rem;
}

.exhibition-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.exhibition-subtitle {
  font-size: 1.2rem;
  color: #666;
}

.exhibition-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

.exhibition-nav button {
  padding: 0.8rem 1.5rem;
  border: 2px solid #667eea;
  background-color: transparent;
  color: #667eea;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.exhibition-nav button:hover,
.exhibition-nav button.active {
  background-color: #667eea;
  color: white;
}

.artwork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.artwork-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  background: white;
  cursor: pointer;
}

.artwork-card:hover {
  transform: translateY(-5px);
}

.artwork-image {
  height: 250px;
  overflow: hidden;
}

.artwork-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.artwork-card:hover .artwork-image img {
  transform: scale(1.05);
}

.artwork-info {
  padding: 1.5rem;
}

.artwork-info h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.4rem;
  color: #333;
}

.artist {
  color: #667eea;
  font-weight: 500;
  margin: 0 0 1rem 0;
}

.description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.artwork-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.dynasty {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
}

.style {
  background-color: #f3e5f5;
  color: #7b1fa2;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
}
</style>